<template>
    <div class="person">
        <h2>姓名: {{ name }}</h2>
        <h2>年龄: {{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    beforeCreate() {
        console.log('beforeCreate');

    },
    setup() {
        console.log('setup');
        // console.log(this); // setup 函数中的 this 是 undefined, vue3 中已经弱化 this 了

        // 数据，原来是写在 data 中，此时 name、age、tel 都不是响应式数据
        let name = '张三' // 注意此时 name 不是响应式的
        let age = 18 // 注意此时 age 不是响应式的
        let tel = '13811111111' // 注意此时 tel 不是响应式的

        // 方法
        function changeName() {
            console.log(1);
            name = 'lisi' // 注意：这样修改 name，页面是没有变化的
            console.log(name); // name 确实改了，但 name 不是响应式的

        }
        function changeAge() {
            console.log(2);
            age += 1 // 注意：这样修改 age，页面是没有变化的
            console.log(age); // age 确实改了，但 age 不是响应式的

        }
        function showTel() {
            console.log(3);
            alert(tel) // 注意：这样修改 tel，页面是没有变化的
            console.log(tel); // tel 确实改了，但 tel 不是响应式的

        }

        return { name, age, changeName, changeAge, showTel }
    },
}
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>